<template>
	<view class="cancel">
		<image class="cancel-dui" src="../../static/dai.png" v-if="info.status==0"></image>
		<h3 v-if="info.status==0">待兑换</h3>
		<image v-if="info.status==1" class="cancel-dui" src="../../static/dui.png"></image>
		<h3 v-if="info.status==1">兑换成功</h3>
		
		<image v-if="info.status==2" class="cancel-dui" src="../../static/cuo.png"></image>
		<h3 v-if="info.status==2">兑换失败</h3>
		<view class="cancel-border"></view>
		
		<view class="cancel-flex">
			<view class="cancel-flex-title">兑换商品</view>
			<view class="cancel-flex-view">{{info.exchange.name}}</view>
		</view>
		
		<view class="cancel-flex">
			<view class="cancel-flex-title">支付积分</view>
			<view class="cancel-flex-view">{{info.integral}}积分</view>
		</view>
		<view class="cancel-flex">
			<view class="cancel-flex-title">兑换时间</view>
			<view class="cancel-flex-view">{{info.createtime_text}}</view>
		</view>
		
		<view class="cancel-flex">
			<view class="cancel-flex-title">核销时间</view>
			<view class="cancel-flex-view">{{info.conversiontime_text}}</view>
		</view>
		<view class="cancel-flex">
			<view class="cancel-flex-title">剩余积分</view>
			<view class="cancel-flex-view">{{info.user.score}}积分</view>
		</view>
		
		
		<view v-if="info.status==0" class="cancel-buttom" @click="buttomClick(1)">核销</view>
		<view v-if="info.status==0" class="cancel-buttom jujue" @click="buttomClick(2)">拒绝核销</view>
	</view>
</template>
<!--  -->
<script>
	export default {
		data() {
			return {
				id  : 3,
				info : []
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getall();
		},
		methods: {
			buttomClick(status){
				let that  = this;
				var parmes = {
					'status'  : status,
					'id' : that.id
				}
				uni.showModal({
				    title: '提示',
				    content: '确定要操作吗？',
				    success: function (res) {
				        if (res.confirm) {
							that.$api.cancel(parmes).then(res=>{
								uni.showToast({
									title: res.msg,
									icon: "none"
								});
								if(res.code == 1){
									that.getall();
								}
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				            // 用户点击了取消按钮的相关逻辑可以放在这里
				        }
				    }
				});
				
			},
			getall(){
				let that = this;
				that.$api.getexchangerecordinfo({'id':that.id}).then(res=>{
					if(res.code == 1){
						that.info = res.data.info;
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
						setTimeout(function() {
							uni.redirectTo({
							  url: '/pages/exchange/exchange'
							});
						}, 2000)
					}
					console.log(that.info);
				})
			}
		}
	}
</script>

<style lang="less">
	.cancel {
		color: #333;
		width: 650rpx;
		margin: auto;
		.cancel-dui {
			display: block;
			width: 100rpx;
			height: 100rpx;
			margin: auto;
			margin-top: 100rpx;
		}
		h3 {
			text-align: center;
			padding-top: 20rpx;
		}
		.cancel-border {
			border-bottom: 2rpx solid #e8e8e8;
			padding-top: 30rpx;
			margin-bottom: 30rpx;
		}
		.cancel-flex {
			display: flex;
			font-size: 36rpx;
			padding-bottom: 30rpx;
			.cancel-flex-title {
				color: #949494;
				width: 200rpx;
				
			}
			.cancel-flex-view {
				width: 600rpx;
				text-align: right;
			}
		}
	}
	.cancel-buttom {
		width: 100%;
		background-color: #ffd456;
		text-align: center;
		margin-top: 80rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		color: #fff;
		font-size: 38rpx;
	}
	.jujue {
		background-color: #e64340;
		margin-top: 20rpx;
		
	}
</style>